<template>
  <a-modal
    :visible="visible"
    :title="title"
    centered
    destroyOnClose
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-descriptions :column="1">
      <a-descriptions-item v-if="detail.type===11" label="开始类型">{{startOrder}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===12" label="送达门点">
        <div>
          <small v-if="detail.address&&detail.address.addressType===1">
            {{detail.address.portName}}
            <br />
          </small>
          <small v-if="detail.address&&detail.address.addressType===2">
            {{`${detail.address.province}${detail.address.city}${detail.address.area}${detail.address.address}`}}
            <br />
          </small>
          <small>
            {{`${detail.address.linkMan} ${detail.address.linkManPhone}`}}
            <br />
          </small>
        </div>
      </a-descriptions-item>
      <a-descriptions-item v-if="detail.type===12" label="操作类型">{{boxOpt}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===16" label="异常类型">{{yichangTypeStr}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===16" label="异常详情">{{yichangeReason}}</a-descriptions-item>

      <a-descriptions-item v-if="detail.type===13" label="任务类型">{{loadStr}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===14" label="过路费(现金)">{{detail.amount}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.opeType === 11 || boxOpt === '提箱'" label="提箱类型">{{box}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type!== 16&&detail.type!== 14" label="箱号">
        <span>{{getSealNoAndNameString(detail.containerNo, detail.holderName)}}</span>
      </a-descriptions-item>
      <a-descriptions-item v-if="detail.type!== 16&&detail.type!== 14" label="封号">
        <span>{{detail.containerSealNo}}</span>
        <a-tooltip placement="bottom" :title="detail.sealNoUpdateReason||'暂无原因'">
          <a-icon type="info-circle" style="color: #1890ff" />
        </a-tooltip>
      </a-descriptions-item>

      <a-descriptions-item v-if="detail.type===11||detail.opeType===14" label="提箱照片">
        <viewer :options="{url: 'data-x'}" v-if="voucherPicsArr.length > 0">
          <template v-for="(src, index) in voucherPicsArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
        <!-- <img class="previewImageClass" v-for="(pic, i) in voucherPicsArr" :key="i" :src="`${pic}?x-oss-process=image/resize,h_100`" @click="previewImageModal(pic)" alt="提箱照片" style="margin:0 10px 10px 0;"/> -->
      </a-descriptions-item>
      <a-descriptions-item v-if="detail.type===13" label="照片">
        <viewer :options="{url: 'data-x'}" v-if="voucherPicsArr.length > 0">
          <template v-for="(src, index) in voucherPicsArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
      </a-descriptions-item>
      <a-descriptions-item v-if="detail.type===14" label="凭证">
        <viewer
          :options="{url: 'data-x'}"
          v-if="voucherPicsArr.length > 0"
          :images="voucherPicsArr"
        >
          <template v-for="(src, index) in voucherPicsArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
      </a-descriptions-item>
      <a-descriptions-item v-if="detail.type===16" label="异常照片">
        <viewer
          :options="{url: 'data-x'}"
          v-if="voucherPicsArr.length > 0"
          :images="voucherPicsArr"
        >
          <template v-for="(src, index) in voucherPicsArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
      </a-descriptions-item>

      <a-descriptions-item v-if="detail.type===11" label="开始时间">{{detail.createTime}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===12" label="送达时间">{{detail.createTime}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===13" label="装卸时间">{{detail.createTime}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===14" label="上传时间">{{detail.createTime}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===16" label="时间">{{detail.createTime}}</a-descriptions-item>
      <a-descriptions-item v-if="detail.type===16" label="备注">
        <a-textarea
          v-model="form.dispatchRemark"
          :rows="4"
          style="vertical-align: top; width: 400px"
        />
      </a-descriptions-item>
    </a-descriptions>

    <!-- <preview-img-modal v-if="previewImage" :src="previewImage" @clear-src="clearSrc"/> -->
  </a-modal>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import { queryOrderTruckFlowDetail, updateOrderTruckFlow } from '@/api/landCenter'
export default {
  name: 'flow-detail',
  props: {
    visible: Boolean,
    flow: Object
  },
  data () {
    return {
      detail: {},
      // previewImage: '',
      form: {
        flowId: '',
        // orderTruckId: '',
        type: '',
        dispatchRemark: ''
      }
    }
  },
  computed: {
    title () { // 11开始订单、12送达门点、13完成装卸、14上传货运凭证
      if (!this.flow) return ''
      else if (this.flow.type === 11) return '开始订单'
      else if (this.flow.type === 12) return '送达门点'
      else if (this.flow.type === 13) return '完成装卸'
      else if (this.flow.type === 14) return '运货凭证'
      else if (this.flow.type === 16) return '异常处理'
      else return ''
    },
    // 开始订单
    startOrder () {
      return this.detail.opeType === 11 ? '提箱离港' : (this.detail.opeType === 13 ? '套箱接单' : '')
    },
    boxOpt () {
      return this.detail.opeType === 15 ? '不提箱' : (this.detail.opeType === 14 ? '提箱' : '')
    },
    box () {
      return this.detail.emptyOrHeavy === 2 ? '重箱' : (this.detail.emptyOrHeavy === 1 ? '空箱' : '')
    },
    loadStr () {
      return this.detail.opeType === 16 ? '装货' : (this.detail.opeType === 17 ? '卸货' : '')
    },
    voucherPicsArr () {
      let voucherPics = this.detail.voucherPics
      if (voucherPics) return voucherPics.split(',')
      return []
    },
    yichangTypeStr () {
      return this.detail.opeType === 21 ? '故障报警' : (this.detail.opeType === 22 ? '放空' : '')
    },
    yichangeReason () {
      return this.detail.emptyReasonType === 3 ? this.detail.remark : (this.detail.emptyReasonType === 2 ? '坏污箱' : '客户不满意')
    }
  },
  methods: {
    combineObjCommons (sm, big) {
      for (let k in sm) {
        sm[k] = big[k]
      }
    },
    getSealNoAndNameString (containerNo, holderName) {
      let holderNameResult = holderName ? `(${holderName})` : ''
      return `${containerNo}${holderNameResult}`
    },
    // previewImageModal (src) {
    //   this.previewImage = src
    // },
    // clearSrc () {
    //   this.previewImage = null
    // },
    handleOk () {
      if (this.detail.opeType === 21) {
        if (!this.$root._bc.editFlow) {
          this.$message.error('您无此权限！')
          return
        }
        if (this.$refs.form) {
          this.$refs.form.validate(valid => {
            if (valid) {
              updateOrderTruckFlow(this.form).then(rsp => {
                this.$message.success('保存成功')
                this.$emit('closeIt')
              })
            }
          })
        } else {
          updateOrderTruckFlow(this.form).then(rsp => {
            this.$message.success('保存成功')
            this.$emit('closeIt')
          })
        }
      } else {
        this.$emit('closeIt')
      }
    },
    handleCancel () {
      this.$emit('closeIt')
    }
  },
  watch: {
    visible () {
      if (this.visible && this.flow && this.flow.id) {
        queryOrderTruckFlowDetail({ flowId: this.flow.id }).then(rsp => {
          this.detail = rsp.data
          this.combineObjCommons(this.form, rsp.data)
          this.sealNoAndNameDisplayId = this.getSealNoAndNameString(this.form.containerNo, this.form.holderName)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-descriptions-item-content {
  vertical-align: top;
}
.inputReadonly {
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0px;
  margin-right: 5px;
  padding: 0;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  width: 90%;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  transition: all 0.3s;
  &:hover {
    border-color: #1890ff;
  }
}
</style>
